<style>
    .catetree_box {
        width: 200px;
        min-height: calc(100vh - 120px);
        background: #fff;
        border: solid 1px #f3f2f2;
        margin-right: 15px;
    }

    .articlelist {
        border-bottom: 1px dashed #ccc;
        padding-bottom: 15px;
        padding-top: 15px;
    }

    .articlelist .title {
        font-size: 16px;
        font-weight: 600;
        padding-bottom: 10px;
    }

    .articlelist .op {
        margin-left: 15px;
    }

    .articlelist .desc {
        color: #999;
        line-height: 26px;
        text-indent: 2ch;
        margin-top: 10px;
    }

    .articlelist .desc img {
        width: 100px;
        height: 100px;
        margin-right: 20px;
    }

    .articlelist .op {
        display: none;
    }

    .layui-tree-set {
        border-radius: 4px;
    }
</style>
<div class="rightcontent rc-bg-grey">
    <div class="rc-pagepadding">

        <div class="rc-flex ">
            <div class="catetree_box">
                <div class=" rc-pannel " style="border: 0;border-radius:0">
                    <div class="rc-pannel-body layui-form " style="padding-right: 15px;padding-top:10px">
                        <div id="ID-tree-demo-showCheckbox"></div>
                    </div>
                </div>
            </div>
            <div class="rc-flex1">

                <div class="rc-pannel rc-searchbox">
                    <form class="layui-form " method="get">
                        <div class="rc-flex-vertical-center rc-searchbox">
                            <div class="layui-inline ">
                                <label class="layui-form-label">标题</label>
                                <div class="layui-input-inline ">
                                    <input type="text" name="name" placeholder="" value="<?php echo request()->get('name', ''); ?>" autocomplete="off" class="layui-input">
                                </div>
                            </div>


                            <div class="layui-inline">
                                <div class="layui-form-label">
                                    <input type="hidden" name="cid" id="cid" />
                                    <input type="hidden" name="page" value="1" id="page" />
                                    <button type="submit" class="layui-btn layui-btn-sm layui-btn-primary"><i class="iconfont">&#xeafe;</i> 搜索</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class=" rc-pannel  rc-margin-top-default" style="border-radius:0">
                    <div class=" rc-pannel-header">
                        <div class="rc-flex layui-form toolbar rc-flex-justify-between">
                            <div>
                                <div class=" rc-flex rc-flex-vertical-center ">
                                    <input type="checkbox" lay-filter="checkAll" autocomplete="off" />
                                    <select style="width: 100px;" lay-filter="quickop">
                                        <option></option>
                                        <option value="restore">恢复</option>
                                        <option value="del">彻底删除</option>

                                    </select>
                                </div>

                            </div>
                            <div>


                            </div>
                        </div>


                    </div>

                    <div class="rc-pannel-body layui-form rc-pagepadding" id="contentlist">

                    </div>
                </div>





            </div>
        </div>


    </div>
</div>
<input type="hidden" id="cid" />
<script>
    layui.use(function() {

        var tree = layui.tree;
        var layer = layui.layer;
        var form = layui.form;


        /**获取文章 */
        var keyword = '';
        var page = 1;
        var cid = 0;

        function selcontents() {
            $('#contentlist').html('');
            $.ajax({
                url: '/app/cms/admin/Index/recycles?type=selcontents&cid=' + $('#cid').val(), //请求路径
                type: "POST", //请求方式
                success: function(data) {
                    if (data.code == 0) {
                        var contentlist = '';
                        $.each(data.data.items, function(i, v) {
                            var img = '';
                            if (v.thumb != '') {
                                img = '<img src="' + v.thumb + '" />';
                            }
                            contentlist += `
                             <div class="articlelist">
                                <div><input type="checkbox" class="item_checkbox" value="` + v.id + `"/> 
                                    <a href="#" class="primary title">` + v.title + ` </a>  
                                    <a class="op rc-tips" message="预览"><i class="iconfont">&#xe639;</i><a>
                                    <a class="op rc-tips" message="编辑" href="/app/cms/admin/Index/edit?cid=` + v.cid + `&id=` + v.id + `"><i class="iconfont">&#xe61b;</i><a>
                                </div>
                              
                                <div class="desc rc-flex">
                                    
                                   ` + img + `
                                    <div>
                                        ` + v.content.replace(/<[^>]*>/g, '') + `
                                    </div>
                                </div>
                            </div>`;
                        });
                        $('#contentlist').html(contentlist);
                        form.render();
                    }
                },
                error: function() {

                },

            });
        }

        // 渲染
        var cates = '<?php echo $cates ?>';
        var catesobj = eval("(" + cates + ")");

        tree.render({
            elem: '#ID-tree-demo-showCheckbox',
            id: 'test',
            data: catesobj,
            showCheckbox: false,
            click: function(obj) {
                const primaryColor = style.getPropertyValue('--primary-color').trim();
                if (typeof(obj.data.children) === 'undefined') {
                    $('.layui-tree-set').find('.layui-tree-txt').removeAttr('style');
                    $(obj.elem).find('.layui-tree-txt').css({
                        'color': primaryColor,
                        'font-weight': 600
                    });

                    $('#cid').val(obj.data.id);
                    window.history.pushState({}, '', window.location.pathname + "?cid=" + obj.data.id);
                    selcontents();
                }


            }

        });

        <?php
        if (request()->get('cid', '') == '') {
        ?>
            if (catesobj.length > 0) {
                initCheckCate(catesobj[0]);
            }

        <?php
        } else {
        ?>
            $('#cid').val(<?php echo request()->get('cid') ?>);
            $('.layui-tree').find("[data-id=" + $('#cid').val() + "]").find('.layui-tree-txt').css({
                'color': primaryColor,
                'font-weight': 600
            });
            selcontents();
        <?php
        }
        ?>

        //初始化 Cid
        function initCheckCate(catesobj) {
            if (typeof(catesobj.children) !== 'undefined') {
                initCheckCate(catesobj.children[0]);

            } else {
                $('#cid').val(catesobj.id);
                $('.layui-tree').find("[data-id=" + catesobj.id + "]").find('.layui-tree-txt').css({
                    'color': primaryColor,
                    'font-weight': 600
                });

                window.history.pushState({}, '', window.location.pathname + "?cid=" + catesobj.id);
                selcontents();
            }
        }






        //select 快捷操作
        form.on('select(quickop)', function(data) {
            var elem = data.elem; // 获得 select 原始 DOM 对象
            var value = data.value; // 获得被选中的值
            var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
            var ids = getAllChkIds();
            if (value == 'restore') {
                //恢复
                layer.confirm('确定要恢复么？', {
                    btn: ['确定', '关闭'] //按钮
                }, function() {

                    $.ajax({
                        url: '/app/cms/admin/Index/restore', //请求路径
                        type: "POST", //请求方式
                        data: {
                            cid: $('#cid').val(),
                            contentids: ids
                        },
                        success: function(data) {
                            layer.closeAll();
                            if (data.code == 0) {

                                toastr_success("恢复成功", function() {
                                    window.location.reload();
                                });
                            } else {
                                toastr_error(data.message);
                            }
                        },
                        error: function() {

                        },

                    });

                }, function() {


                });

            }

            if (value == 'del') {
                //删除
                layer.confirm('确定要彻底删除么？', {
                    btn: ['确定', '关闭'] //按钮
                }, function() {

                    $.ajax({
                        url: '/app/cms/admin/Index/delete', //请求路径
                        type: "POST", //请求方式
                        data: {
                            cid: $('#cid').val(),
                            contentids: ids
                        },
                        success: function(data) {
                            layer.closeAll();
                            if (data.code == 0) {
                                toastr_success("删除成功", function() {
                                    window.location.reload();
                                });
                            } else {
                                toastr_error(data.message);
                            }
                        },
                        error: function() {

                        },

                    });


                }, function() {


                });

            }

        });



        /**编辑删除 隐藏显示 */
        $('body').on('mouseenter', '.articlelist', function() {
            $(this).find('.op').show();
        });
        $('body').on('mouseleave', '.articlelist', function() {
            $(this).find('.op').hide();
        });
    });
</script>